<template>
    <div class="businessManagement-satisfactionSurvey-content">
        <div v-if="details.fsftj == '未提交'">
            <div style="text-align: center;">
                <h2 style="font-weight: 600;">{{ details.fwjbt }}</h2>
            </div>
            <div style="font-weight: 600;color: #2F54EB;font-size: 16px;">
                <span>{{ details.fwjms }}</span>
            </div>
            <div style="margin-top: 15px;">
                <div class="theEntire-question" id="fgzdw">
                    <span class="subject-title">
                        <span class="asterisk-text">*</span>
                        1.单位名称
                    </span>
                    <a-textarea
                        v-model="fstateData.fgzdw"
                        placeholder="请输入单位名称"
                        :auto-size="{ minRows: 1, maxRows: 2 }"
                        @blur="preserveBlur('fgzdw',fstateData.fgzdw)"
                    />
                    <div v-if="validate.indexOf('fgzdw') !== -1" class="verification-prompt-text">请输入单位名称</div>
                </div>
                <div class="theEntire-question" id="fqyfzr">
                    <span class="subject-title">
                        <span class="asterisk-text">*</span>
                        2.联系人
                    </span>
                    <a-textarea
                        v-model="fstateData.fqyfzr"
                        placeholder="请输入联系人"
                        :auto-size="{ minRows: 1, maxRows: 2 }"
                        @blur="preserveBlur('fqyfzr',fstateData.fqyfzr)"
                    />
                    <div v-if="validate.indexOf('fqyfzr') !== -1" class="verification-prompt-text">请输入联系人</div>
                </div>
                <div class="theEntire-question" id="flxdh">
                    <span class="subject-title">
                        <span class="asterisk-text">*</span>
                        3.联系电话
                    </span>
                    <a-textarea
                        v-model="fstateData.flxdh"
                        placeholder="请输入联系电话"
                        :auto-size="{ minRows: 1, maxRows: 2 }"
                        @blur="preserveBlur('flxdh',fstateData.flxdh)"
                    />
                    <div v-if="validate.indexOf('flxdh') !== -1" class="verification-prompt-text">请输入联系电话</div>
                </div>
                <div class="theEntire-question">
                    <span class="subject-title" id="fxz">
                        <span class="asterisk-text">*</span>
                        4.单位类型
                    </span>
                    <div>
                        <a-checkbox-group v-model="fstateData.fxz" @change="preserveBlur('fxz',fstateData.fxz.length?fstateData.fxz.join(','):'')" >
                            <div v-for="(item,index) in plainOptions" :key="index">
                                <a-checkbox :value="item.itemValue">{{ item.itemText }}</a-checkbox>
                            </div>
                        </a-checkbox-group>
                    </div>
                    
                    <a-textarea
                        id="fqtxz"
                        v-if="fstateData.fxz && fstateData.fxz.indexOf('其他') !== -1"
                        v-model="fstateData.fqtxz"
                        placeholder="请输入其他"
                        :auto-size="{ minRows: 1, maxRows: 2 }"
                        @blur="preserveBlur('fqtxz',fstateData.fqtxz)"
                    />
                    <div v-if="validate.indexOf('fxz') !== -1" class="verification-prompt-text">请选择单位类型</div>
                    <div v-if="validate.indexOf('fqtxz') !== -1" class="verification-prompt-text">请输入其他</div>
                </div>
                <div class="theEntire-question" id="fyjhyq">
                    <span class="subject-title">
                        <span class="asterisk-text">*</span>
                        5.其他意见建议和要求
                    </span>
                    <a-textarea
                        v-model="fstateData.fyjhyq"
                        placeholder="请输入其他意见建议和要求"
                        :auto-size="{ minRows: 3, maxRows: 1000 }"
                        @blur="preserveBlur('fyjhyq',fstateData.fyjhyq)"
                    />
                    <div v-if="validate.indexOf('fyjhyq') !== -1" class="verification-prompt-text">请选择单位类型</div>
                </div>
                <div class="question-type">对中心的评价</div>
                <div class="theEntire-question" v-for="(item,index) in zxpjList" :key="index" :id="'fpjjg'+index">
                    <span class="subject-title">
                        <span class="asterisk-text">*</span>
                        {{ item.fpjbt }}
                    </span>
                    <div class="answer-list">
                        <span @click="preserveCahnge('fpjjg',item,trem,index)" class="foption-box" :class="item.fpjjg == trem?'foption-fpjjg':''" v-for="(trem,tIndex) in item.foption.split(',')" :key="tIndex">{{ trem }}</span>
                    </div>
                    <div style="display: flex;justify-content: space-between;color: #9f9f9f;">
                        <span>非常不满意</span>
                        <span>非常满意</span>
                    </div>
                    <div v-if="validate.indexOf('fpjjg'+index) !== -1" class="verification-prompt-text">请选择</div>
                </div>
                <!-- （审评时间：{{details.fjcsj}}） -->
                <div class="question-type">对审评组的评价</div>
                <div class="theEntire-question" v-for="(item,index) in jcyPjList" :key="index">
                    <div class="fjcy-content-box">
                        <span class="fjcysf-fjcyxm-box">{{ item.fjcysf }}：{{ item.fjcyxm }}</span>
                        <div class="jcy-pj-box" :id="'fzxqk'+index">
                            <span class="subject-title">
                                <span class="asterisk-text">*</span>
                                审评员廉洁自律和审评纪律方面的执行情况（1-10分）
                            </span>
                            <div class="answer-list">
                                <span @click="preserveClick('fzxqk',item,trem,index)" class="foption-box" :class="item.fzxqk == trem?'foption-fpjjg':''" v-for="(trem,tIndex) in item.foption.split(',')" :key="tIndex">{{ trem }}</span>
                            </div>
                            <div style="display: flex;justify-content: space-between;color: #9f9f9f;">
                                <span>非常不满意</span>
                                <span>非常满意</span>
                            </div>
                        </div>
                        <div v-if="validate.indexOf('fzxqk'+index) !== -1" class="verification-prompt-text">请选择</div>
                        <div class="jcy-pj-box" :id="'fywnl'+index">
                            <span class="subject-title">
                                <span class="asterisk-text">*</span>
                                审评员的业务能力（1-10分）
                            </span>
                            <div class="answer-list">
                                <span @click="preserveClick('fywnl',item,trem,index)" class="foption-box" :class="item.fywnl == trem?'foption-fpjjg':''" v-for="(trem,tIndex) in item.foption.split(',')" :key="tIndex">{{ trem }}</span>
                            </div>
                            <div style="display: flex;justify-content: space-between;color: #9f9f9f;">
                                <span>非常不满意</span>
                                <span>非常满意</span>
                            </div>
                        </div>
                        <div v-if="validate.indexOf('fywnl'+index) !== -1" class="verification-prompt-text">请选择</div>
                        <div class="jcy-pj-box" :id="'fzhpj'+index">
                            <span class="subject-title">
                                <span class="asterisk-text">*</span>
                                审评员在审评过程中实事求是、注重实绩、综合评价（1-10分）
                            </span>
                            <div class="answer-list">
                                <span @click="preserveClick('fzhpj',item,trem,index)" class="foption-box" :class="item.fzhpj == trem?'foption-fpjjg':''" v-for="(trem,tIndex) in item.foption.split(',')" :key="tIndex">{{ trem }}</span>
                            </div>
                            <div style="display: flex;justify-content: space-between;color: #9f9f9f;">
                                <span>非常不满意</span>
                                <span>非常满意</span>
                            </div>
                        </div>
                        <div v-if="validate.indexOf('fzhpj'+index) !== -1" class="verification-prompt-text">请选择</div>
                        <div class="jcy-pj-box">
                            <span class="subject-title">备注</span>
                            <div class="answer-list">
                                <a-textarea
                                    v-model="item.fbz"
                                    placeholder="请输入其他"
                                    :auto-size="{ minRows: 1, maxRows: 2 }"
                                    @blur="preserveClick('fbz',item,item.fbz,index)"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="question-type">建议和要求</div>
                <div class="theEntire-question">
                    <span class="subject-title">其他意见建议和要求</span>
                    <a-textarea
                        v-model="fstateData.fyjhyq"
                        placeholder="请输入单位名称"
                        :auto-size="{ minRows: 1, maxRows: 1000 }"
                    />
                </div> -->
            </div>
            <div style="display: flex;justify-content: center;">
                <a-button class="blue-btn" type="primary" @click="submitClick">提交</a-button>
            </div>
        </div>
        <div v-if="details.fsftj == '已提交'" style="margin: 10px;margin-top: 30px;">
            <a-result status="success" title="已提交" />
            <div style="display: flex;justify-content: center;margin:10px 0"><a-button size="large" class="blue-btn" type="primary" @click="exportClick">下载满意度调查问卷</a-button></div>
            <br/>
            <!-- <h3>请下载满意度调查问卷表，打印纸质版盖公章后由单位统一上报自治区食品药品审评查验中心</h3> -->
            <br/>
            <h3>（若无法正常下载，请复制网址: <a :href="'https://bg.yjj.gxzf.gov.cn/t_spcyjcy-svc/api/spzx-spcy/myd/downMydTemplatepPdfFile?id='+details.id">{{'https://bg.yjj.gxzf.gov.cn/t_spcyjcy-svc/api/spzx-spcy/myd/downMydTemplatepPdfFile?id='+details.id}}</a><a-button class="blue-btn" type="primary" @click="()=>{
                $copyText('https://bg.yjj.gxzf.gov.cn/t_spcyjcy-svc/api/spzx-spcy/myd/downMydTemplatepPdfFile?id='+details.id)
                .then(() => {
                    $message.success('复制成功')
                })
                .catch(() => {
                    $message.warning('复制失败！');
                });
            }">复制网址</a-button>至电脑浏览器下载满意度调查问卷表）</h3>
            <br/>
        </div>
    </div>
</template>
<script>
import {
    mydquerySqsxLjzlMydObject,
    dictgetDictListByDictName,
    mydeditLjzlMyd,
    mydupdateZxPjById,
    mydupdateHcyPj,
    mydTjLjzlMydWj,
    myddownMydTemplatepPdfFile,
} from './service/index'
import blobType from '@/common/blobType'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            queryData:{},
            details:{},
            jcyPjList:{},
            zxpjList:{},
            fstateData:{},
            plainOptions:[],
            overallVerification:['fgzdw','fqyfzr','flxdh','fxz','fqtxz','fyjhyq'],
            validate:[],
            sourceData:{},
        }
    },
    watch:{

    },
    mounted(){
        dictgetDictListByDictName({dictName:'廉洁自律满意度性质'}).then(res=>{
            if(res.code == 200){
                this.plainOptions = res.result
            }else{

            }
        })
        this.queryData = JSON.parse(this.$route.query.obj)
        this.getFileData(this.queryData)
        
    },
    methods:{
        getFileData(row){
            this.overallVerification = ['fgzdw','fqyfzr','flxdh','fxz','fqtxz','fyjhyq']
            mydquerySqsxLjzlMydObject({sqsxid:row.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.sourceData = JSON.stringify(res.result.myd)
                    this.details = {...res.result.myd,sqsxid:row.sqsxid}
                    res.result.myd.fxz = res.result.myd.fxz?res.result.myd.fxz.split(','):[]
                    this.fstateData = res.result.myd
                    // this.fstateData = this.fstateData.fxz?this.fstateData.fxz.split(','):[]
                    this.jcyPjList = res.result.jcyPjList
                    this.zxpjList = res.result.zxpjList
                    this.zxpjList.forEach((item,index)=>{
                        if(!item.fpjjg){
                            this.overallVerification.push('fpjjg'+index)
                        }
                    })
                    this.jcyPjList.forEach((item,index)=>{
                        if(!item.fzxqk){
                            this.overallVerification.push('fzxqk'+index)
                        }
                        if(!item.fywnl){
                           this.overallVerification.push('fywnl'+index) 
                        }
                        if(!item.fzhpj){
                            this.overallVerification.push('fzhpj'+index)
                        }
                    })
                    //console.log('问卷详情',res)
                }else{

                }
            })
        },
        fxzonChange(val){

        },
        validateChange(){
            this.validate = []
            let arr = ['fgzdw','fqyfzr','flxdh','fxz','fqtxz','fyjhyq']
            this.overallVerification.forEach((item,index)=>{
                if(arr.indexOf(item) !== -1){
                    if((!this.fstateData[item] && item !== 'fqtxz') || (item == 'fqtxz' && this.fstateData['fxz'] && this.fstateData['fxz'].indexOf('其他') !== -1)){
                        if(this.validate.indexOf(item) == -1){
                            this.validate.push(item)
                            //console.log('什么id2',item)
                            document.querySelector('#'+item).scrollIntoView({
                                behavior: "smooth"
                            });
                            throw ''
                        }
                    }else{
                        if(this.validate.indexOf(item) !== -1){
                            this.validate.splice(this.validate.indexOf(item),1)
                        }
                    }
                    
                }else{
                    if(this.validate.indexOf(item) == -1){
                        this.validate.push(item)
                        //console.log('什么id',item)
                        document.querySelector('#'+item).scrollIntoView({
                            behavior: "smooth"
                        });
                        throw ''
                    }
                }
            })
        },
        preserveBlur(key,val){
            if(key == 'fxz' && this.validate.indexOf('fqtxz') !== -1 && val.indexOf('其他' == -1)){
                this.validate.splice(this.validate.indexOf('fqtxz'),1)
            }
            if(JSON.parse(this.sourceData)[key] == val) return
            let data = {id:this.details.id,sqsxid:this.details.sqsxid}
            data[key] = val?val:''
            mydeditLjzlMyd(data).then(res=>{
                if(res.code == 200){
                }else{
                    this.$message.warning(res.message)
                }
                this.getFileData(this.queryData)
            })
        },
        preserveCahnge(key,item,val,index){//修改对中心评价
            //console.log(key+index)
            if(this.validate.indexOf(key+index) !== -1 && val){
                this.validate.splice(this.validate.indexOf(key+index),1)
                //console.log('删除了')
            }
            let data = {id:item.id}
            data[key] = val?val:''
            mydupdateZxPjById(data).then(res=>{
                if(res.code == 200){
                }else{
                    this.$message.warning(res.message)
                }
                this.getFileData(this.queryData)
            })
        },
        preserveClick(key,item,val,index){//修改对审评组评价
            //console.log(key+index)
            if(this.validate.indexOf(key+index) !== -1 && val){
                this.validate.splice(this.validate.indexOf(key+index),1)
                //console.log('删除了')
            }
            let data = {id:item.id}
            data[key] = val?val:''
            mydupdateHcyPj(data).then(res=>{
                if(res.code == 200){
                }else{
                    this.$message.warning(res.message)
                }
                this.getFileData(this.queryData)
            })
        },
        async submitClick(){//提交
            await this.validateChange()
            //console.log('最后的验证',this.validate)
            let that = this
            this.$confirm({
                title:'您确认要提交吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    mydTjLjzlMydWj({id:that.details.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.getFileData(that.queryData)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
            
        },
        exportClick(){//下载
            var that = this
            myddownMydTemplatepPdfFile({id:this.details.id}).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf('.pdf')
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', '满意度问卷调查表' + '.pdf')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                // }
            })
        },
    }
}
</script>
<style lang="less">
.businessManagement-satisfactionSurvey-content{
    padding: 10px;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    textarea.ant-input{
        background-color: #f9fafc;
        border-color:transparent;
        box-shadow:none;
    }
    .ant-input:focus{
        border-color:transparent;
        box-shadow:none;
    }
    .ant-input:hover{
        border-color:transparent;
        box-shadow:none;
    }
    .ant-checkbox + span{
        display: inline-block;
        padding: 0;
        padding-left: 3px;
        font-size: 16px;
        font-weight: 600;
    }
    .ant-checkbox-wrapper + .ant-checkbox-wrapper{
        margin-left: 3px;
    }
    .question-type{
        font-size: 18px;
        font-weight: 600;
        color: #2F54EB;
        margin: 8px 0;
    }
    .theEntire-question{
        margin-bottom: 8px;
        margin-left: 5px;
        .fjcy-content-box{
            padding: 5px;
            margin-bottom: 15px;
            border-bottom: 3px solid #2F54EB ;
            border-left: 1px solid #2F54EB;
            border-right: 1px solid #2F54EB;
            border-top: 3px solid #2F54EB ;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }
        .fjcysf-fjcyxm-box{
            font-size: 19px;
            font-weight: 600;
        }
        .subject-title{
            font-size: 16px;
            font-weight: 600;
        }
        .asterisk-text{
            color: red;
        }
        .jcy-pj-box{
            margin-bottom: 15px;
            
        }
        .answer-list{
            margin-top: 8px;
            display: flex;
            justify-content: space-around;
        }
        .foption-box{
            display: inline-block;
            border: 1px solid #d9d9d9;
            padding: 0 8px;
            font-weight: 600;
        }
        .foption-fpjjg{
            background-color: #2F54EB;
            color: #fff;
        }
    }
    .verification-prompt-text{
        font-size: 16px;
        font-weight: 600;
        color: red;
    }
}
</style>